<template>
  <div class="container">
    <div class="header">
      <van-icon name="arrow-left" tag="a" href="/home" />
			<input type="text" placeholder="烘焙"/>
      <span>取消</span>
    </div>
    <div class="content">
      <ul>
        <li>
          <img src="../../../public/img/tou.jpg" alt="">
          <div class="right">
            <p>手把手打你局部减脂，甩掉一天的脂肪不成问题</p>
            <a href="">培根肉</a>
            <a href="">洋葱</a>
            <a href="">番茄酱</a>
            <a href="">葱油拌面</a>
          </div>
        </li>
        <li>
          <img src="../../../public/img/tou.jpg" alt="">
          <div class="right">
            <p>手把手打你局部减脂，甩掉一天的脂肪不成问题</p>
            <a href="">培根肉</a>
            <a href="">洋葱</a>
            <a href="">番茄酱</a>
            <a href="">葱油拌面</a>
          </div>
        </li>
        <li>
          <img src="../../../public/img/tou.jpg" alt="">
          <div class="right">
            <p>手把手打你局部减脂，甩掉一天的脂肪不成问题</p>
            <a href="">培根肉</a>
            <a href="">洋葱</a>
            <a href="">番茄酱</a>
            <a href="">葱油拌面</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @import "@/lib/reset";
  .container {
    .header {
      @include flexbox();
	    @include justify-content();
	    @include align-items();
      line-height:.42rem;
      input {
        border-radius: .5rem;
        @include rect(80%,70%);
        text-indent: .05rem;
      }  
        border: .01rem solid #ccc;		
      a {
        position: absolute;
        left:0;
      }
      span {
        position: absolute;
        right:.05rem;
      }
    }
    .content {
      ul {
          li {
            @include flexbox();
            img {
              @include rect(1.6rem,1.6rem);
              margin-bottom: .1rem;
            }
            .right {
              margin-left:.2rem;
              margin-right:.2rem;
              p {
                line-height: .3rem;
                font-weight: 800;
                margin-bottom: .1rem
              }
              a {
                margin-right:.1rem;
              }
            }
          }
        }
    }
  }  
</style>

<script>
import Vue from 'vue';
import { Icon } from "Vant";
Vue.use(Icon)

export default {
  
}
</script>